<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keyword" content="">
    <!-- <link rel="shortcut icon" href="img/favicon.png"> -->
    <title>任务评审</title>
    <!-- <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
    <link rel="stylesheet" href="css/style.css">
    <style type="text/css">
        .weui-label{width: 140px;}
    </style>
</head>

<body>
    <div class="page__bd">
        <div class="weui-cells">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">项目名称</label></div>
                <div class="weui-cell__bd">开关BG-1</div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">任务名称</label></div>
                <div class="weui-cell__bd">开关BG-1</div>
            </div>
        </div>
        <div class="weui-cells__title">输入项</div>
        <div class="weui-cells">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">初始材料清单</label></div>
                <div class="weui-cell__bd">某某某清单</div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">初始过程流程图</label></div>
                <div class="weui-cell__bd">某某某文件</div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">初始特性清单表单</label></div>
                <div class="weui-cell__bd">某某某表单</div>
            </div>
        </div>
        <div class="weui-cells__title">检查表</div>
        <div class="weui-cells">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p>某某某检查表有没有多个</p>
                </div>
            </div>
        </div>
        <div class="weui-panel">
            <div class="weui-panel__hd">评审详情</div>
            <div class="weui-panel__bd">
                <div class="weui-media-box weui-media-box_text">
                    <p class="weui-media-box__desc">评审时间：2017-06-25</p>
                    <p class="weui-media-box__desc">评审结果：<span class="text-success">通过</span></p>
                    <p class="weui-media-box__desc">评审意见：请联系相关人员确认设计可行性</p>
                    <p class="weui-media-box__desc">附件：
                        <a href="" class="text-primary">某某某会议纪要.doc</a>&nbsp;&nbsp;
                        <a href="" class="text-primary">某某某测试数据.doc</a>&nbsp;&nbsp;
                    </p>
                </div>
                <div class="weui-media-box weui-media-box_text">
                    <p class="weui-media-box__desc">评审时间：2017-06-25</p>
                    <p class="weui-media-box__desc">评审结果：<span class="text-danger">不通过</span></p>
                    <p class="weui-media-box__desc">评审意见：请联系相关人员确认设计可行性</p>
                    <p class="weui-media-box__desc">附件：
                        <a href="" class="text-primary">某某某会议纪要.doc</a>&nbsp;&nbsp;
                        <a href="" class="text-primary">某某某测试数据.doc</a>&nbsp;&nbsp;
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="weui-btn-area">
        <button id="approve" class="weui-btn weui-btn_primary">评审</button>
    </div>
    <div class="weui-footer">
        <p class="weui-footer__text">Copyright &copy; 2016-2017 宙能信息. All rights reserved.</p>
    </div>
    <!--BEGIN toast-->
    <div id="toast" style="display: none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <i class="weui-icon-success-no-circle weui-icon_toast"></i>
            <p class="weui-toast__content">评审完成</p>
        </div>
    </div>
    <!-- loading toast -->
    <div id="loadingToast" style="display:none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <i class="weui-loading weui-icon_toast"></i>
            <p class="weui-toast__content">评审中&hellip;</p>
        </div>
    </div>
    <div id="dialogs">
        <!--BEGIN dialog1-->
        <div class="js_dialog" id="iosDialog1" style="display: none;">
            <div class="weui-mask"></div>
            <div class="weui-dialog appraise-dialog">
                <!-- <div class="weui-dialog__hd"><strong class="weui-dialog__title">弹窗标题</strong></div> -->
                <div class="weui-dialog__bd">
                    <textarea name="" id="" rows="4" class="weui-textarea" placeholder="请输入回复意见"></textarea>
                </div>
                <div class="weui-dialog__ft">
                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">取消</a>
                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">通过</a>
                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_warning">不通过</a>
                </div>
            </div>
        </div>
        <!--END dialog1-->
    </div>
    <!-- <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script> -->
    <!-- <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
    <script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
    <script>
    (function($) {
        var $toast = $('#toast');
        var $loadingToast = $('#loadingToast');
        var $iosDialog1 = $('#iosDialog1');

        /**
         * 评审操作
         * @param  {Boolean} pass 是否通过
         * @return {[type]}      [description]
         */
        var approve = function (pass) {
            if ($loadingToast.css('display') != 'none') return;

            $loadingToast.show();
            // ajax submit
            setTimeout(function () {
                $loadingToast.hide();
                if ($toast.css('display') != 'none') return;

                $toast.show();
                setTimeout(function () {
                    $toast.hide();
                }, 1000);
            }, 2000);
        }

        // 评审按钮
        $('#approve').on('click', function () {
            $iosDialog1.show(200);
        });

        $('#dialogs').on('click', '.weui-dialog__btn', function(){
            $(this).parents('.js_dialog').hide(200);
            if ($(this).hasClass('weui-dialog__btn_primary')) {
                approve(true);
            } else if ($(this).hasClass('weui-dialog__btn_warning')) {
                approve(false);
            }
        });
    })(Zepto);
    </script>
</body>

</html>
